<template>
  <el-upload :http-request="imgUpload" :before-upload="beforeUpload" action="" :show-file-list="false" class="avatar-uploader">
    <!--    如果父组件传递图片了，展示图片，否则展示+号的小icon图标-->
    <img v-if="value" class="avatar" :src="value">
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>

<script>

// wuxiaohui-1254415986
// ap-nanjing
// SecretId: AKIDiFVUDfqkNjocBTVLuDG1VieIfla8QQBf
// SecretKey: FDvLUN1OUJrGOFp9E3bttc4F9m7ByTih
import COS from 'cos-js-sdk-v5' // 引入腾讯云的sdk
export default {
  name: 'ImageUpload',
  props: {
    value: {
      type: String,
      default: null
    }
  },
  methods: {
    // 自定义上传行为
    imgUpload(params) {
      // this
      console.log(params)
      //   1、腾讯云的初始化
      const cos = new COS({
        SecretKey: 'FDvLUN1OUJrGOFp9E3bttc4F9m7ByTih',
        SecretId: 'AKIDiFVUDfqkNjocBTVLuDG1VieIfla8QQBf'
      })
      //   2、配置自己的存储桶信息进行上传
      cos.putObject({
        Bucket: 'wuxiaohui-1254415986', // 存储桶名称
        Region: 'ap-nanjing', // 地域名称
        Key: params.file.name, // 文件名称
        StorageClass: 'STANDARD', // 固定值
        Body: params.file // 文件对象
      }, (err, data) => {
        // err表示错误对象，如果有值，表示上传失败
        if (err) return
        // console.log(err)
        // console.log(data)
        //   先判断是否上传成功了，如果成功了之后触发父组件的input事件，修改图片数据
        if (data.statusCode === 200 && data.Location) {
          this.$emit('input', `http://${data.Location}`)
        }
      })
    },
    beforeUpload(file) {
      //   size属性表示文件的大小，单位字节 5M
      // 5M * 1024 * 1024
      //   type表示文件的类型 只能是图片
      const isImg = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
      const isLimitSize = file.size / 1024 / 1024 < 5 // 小于5M

      // 进行错误提示
      if (!isImg) {
        this.$message.warning('图片格式不对')
      }

      if (!isLimitSize) {
        this.$message.warning('图片小于5M')
      }

      return isImg && isLimitSize
      // 上传的文件对象
      //   可以进行一系列的判断
      //   如果满足条件可以上传，return true 不满足则renturn false[上传终止]
      // console.log(file)
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
